@import '../../containers/Application/colors.scss';
@import './variables.scss';

$labelColor: $scorpion;
$labelDarkColor: $silver;
$labelErrorColor: $roman;
$errorLabelColor: $persianRed;
$errorLabelBackgroundColor: $roman;

$errorLabelHeight: 20px;

.field {
    margin-bottom: calc($fieldMarginBottom - $errorLabelHeight);
}

.type {
    background: transparent;
    border: 0;
    color: $labelColor;
    cursor: pointer;
    margin-left: 7px;
    font-size: 12px;
}

.type-delimiter {
    margin-right: 7px;
}

.type-icon {
    margin-left: 3px;
    font-size: 10px;
}

.error {
    & > .label {
        color: $labelErrorColor;
    }
}

.label {
    display: block;
    color: $labelColor;
    font-size: 14px;
    line-height: 19px;
    margin-bottom: 10px;
    text-align: left;
    white-space: nowrap;

    &::after {
        content: '\200B';
    }

    .dark & {
        color: $labelDarkColor;
    }
}

.description-label,
.error-label {
    display: block;
    color: $labelColor;
    font-size: 10px;
    line-height: $errorLabelHeight;
    min-height: $errorLabelHeight;

    .dark & {
        color: $labelDarkColor;
    }
}

.error-label {
    color: $errorLabelColor;
}
